<!-- eslint-disable vue/no-v-model-argument -->
<template>

  <div>

 <!-- 背景颜色 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
            <!-- 背景圆 -->
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>
            <div class="circle" style="--x:2"></div>
            <div class="circle" style="--x:3"></div>
            <div class="circle" style="--x:4"></div>
    </div>
    <el-form
    :model="form"
    :rules="rules"
    status-icon
    ref="form"
    label-width="130px"
    class="login"
    >
        <h3 class="lg_title">系统登录</h3>
        <el-form-item
        label="用户名"
        label-width="90px"
        prop="username"
        class="username"
        >
        <el-input
        type="input"
        v-model:v-model="form.username"
        autocomplete="off"
        placeholder="请输入账号"
        >

        </el-input>
        </el-form-item>

         <el-form-item
        label="密码"
        label-width="90px"
        prop="password"
        class="password"
        >
        <el-input
        type="password"
        v-model:v-model="form.password"
        autocomplete="off"
        placeholder="请输入密码"

        >

        </el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="login" class="login_bottom">
                登录
            </el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>

import {getMenu} from '../../api/data'
export default {
    name:'LoGin',
    data() {
        return {
            form:{},
            rules:{
                username:[
                    {
                        required:true,message:"请输入用户名",trigger:"blur"
                    },
                    {
                        min:3,
                        message:'用户名已存在',
                        trigger:'blur'
                    }
                ],
                password:[
                    {
                         required:true,message:"请输入密码",trigger:"blur"
                    }
                ]
            }
        }
    },
    methods:{
        login(){
            getMenu(this.form).then(({data:res})=>{
              
                if(res.code === 20000){
                    this.$store.commit('clearMenu')
                    this.$store.commit('setMenu',res.data.menu)
                    this.$store.commit('setToken',res.data.token)    
                    this.$store.commit('addMenu',this.$router)
                    this.$router.push({name:'home',params:{alert:"页面跳转成功"}})
                     
                }else{
                    this.$message.warning(res.data.message)
                }
            })
           
        }
    }
}
</script>

<style>
html{
    margin: 0px;
    padding: 0px;
      box-sizing: border-box;
     
}

.login{
    border-radius: 10px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 40px 40px 15px 35px;
    border-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow:  0 0 20px #cac6c6 ;
}

.lg_title{
    margin: 0 auto 40px auto;
    text-align: center;
    color: #505458;
}

.login_bottom{
    margin: 10px auto 0 auto;
}
.color {
    /* 绝对定位 */
    position: absolute;
    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
    filter: blur(200px);
}
.color:nth-child(1) {
    top: 350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}

 .color:nth-child(2) {
    bottom: 150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}

.color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}
.circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    /* 使用filter(滤镜) 属性，改变颜色。
    hue-rotate(deg)  给图像应用色相旋转 
    calc() 函数用于动态计算长度值 
    var() 函数调用自定义的CSS属性值x*/
    filter: hue-rotate(calc(var(--x) * 70deg));
    /* 调用动画animate，需要10s完成动画，
    linear表示动画从头到尾的速度是相同的，
    infinite指定动画应该循环播放无限次*/
    animation: animate 10s linear infinite;
    /* 动态计算动画延迟几秒播放 */
    animation-delay: calc(var(--x) * -1s);
}

/* 背景圆动画 */

@keyframes animate {
    0%, 100% {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
}

 .circle:nth-child(1) {
    top: 50px;
    right: 60px;
    width: 100px;
    height: 100px;
}

.circle:nth-child(2) {
    top: 150px;
    left: 100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}

.circle:nth-child(3) {
    bottom: 50px;
    right: 60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}

 .circle:nth-child(4) {
    bottom: 80px;
    left: 100px;
    width: 60px;
    height: 60px;
}

.circle:nth-child(5) {
    top: 80px;
    left: 140px;
    width: 60px;
    height: 60px;
}

</style>